Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="screen"> <div class="front"> <div class="display"></div> </div> </div> <div class="keyboard"> <img src="https://www.frontendforever.com/uploads/assets/key2.jpg"> </div> </body> </html>
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body{ background-image: url("https://www.frontendforever.com/uploads/assets/room2.jpg"); background-repeat: no-repeat; background-size: cover; } .keyboard{ width: 1000px; height: 100px; background: black; position: absolute; border-bottom: 1px solid black; top: 65%; left: 15%; transform-origin: bottom; transform-style: preserve-3d; transform: perspective(100px) rotateX(30deg); } .keyboard:before{ content: ''; position: absolute } .keyboard:after{ content: ''; position: absolute; transform-origin: top; width: 100%; height: 30px; bottom: -30px; background: black; transform: perspective(2000px) rotateX(-30deg); } .keyboard:hover{ background: red; } .keyboard:hover:after{ background: linear-gradient(90deg,blue,skyblue,blue); } img{ position: absolute; left: 25px; top: 10px; bottom: 10px; width: 950px; height: 80px; transform: perspective(-500px) rotateX(-50deg); } .screen{ width: 650px; height: 350px; position: relative; top:110px; left: 27.4%; background: black; background-position: center; background-image: url("https://www.frontendforever.com/uploads/assets/apple1.png"); background-repeat: no-repeat; box-shadow: inset 5px 5px 5px white,inset -5px -5px 5px white; transform-origin: bottom; transform: rotateX(0deg); transition: 5s; z-index: 1; } .front{ width: 650px; height: 350px; position: absolute; top:0%; left: 0%; background: black; backface-visibility: hidden; } .screen:hover{ transform-origin: bottom; transform-style: preserve-3d; transform: perspective(1100px) rotateX(-96deg); transition: 5s; } .display{ position: absolute; width:600px; height:300px; top:5%; left: 4%; box-shadow: inset -5px -5px 8px white,inset 5px 5px 8px white; backface-visibility: hidden; }
console.log("Event Fired")